<template>
    <el-dialog
    :title="optionDialog.title"
    :visible="optionDialog.dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-form label-width="80px" :model="formData">
        <el-form-item label="收支类型" >
            <el-select aria-placeholder="请选择" v-model="formData.type" style="width:4rem">
                <el-option v-for="item of selectlist"
                :value="item.value"
                :label="item.labelName"
                :key="item.value"
               >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="收支描述" >
            <el-input autocomplete="off" style="width:6rem;" v-model="formData.describe"></el-input>
        </el-form-item>
        <el-form-item label="收入">
            <el-input autocomplete="off" style="width:4rem;" v-model="formData.income"></el-input>
        </el-form-item>
        <el-form-item label="支出">
            <el-input autocomplete="off" style="width:4rem;" v-model="formData.cash"></el-input>
        </el-form-item>
        <el-form-item label="账户现金" >
            <el-input autocomplete="off" style="width:5rem;" v-model="formData.expend"></el-input>
        </el-form-item>
        <el-form-item label="备注" >
            <el-input type="textarea" size="medium" resize="none" autocomplete="off" v-model="formData.remarks"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="danger" @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submitFormData">提交</el-button>
        </el-form-item>
    </el-form> 
    
    </el-dialog>
</template>

<script>
export default {
  name: 'DialogFrame',
  data(){
      return {
        selectlist:[
            {
                value:"转账",
                labelName:"转账"
            },
            {
                value:"微信支付",
                labelName:"微信支付"
            },
            {
                value:"支付宝",
                labelName:"支付宝"
            },
            {
                value:"在线网银支付",
                labelName:"在线网银支付"
            }
        ]
      }
  },
   props:{
       formData:Object,
       optionDialog:Object
    },
  methods:{
      handleClose(){
        this.optionDialog.dialogVisible=false;
      },
      submitFormData(){
        let url=  this.optionDialog.submit=="add" ? "add" : `edit/${this.formData.id}`;
        let message=url=="add"?"添加":"修改";
          this.$axios.post(`/api/profile/${url}`,this.formData).then(res=>{
              this.optionDialog.dialogVisible=false;
              this.$emit("updateData");
              this.$message({
                  message:`${message}成功！`,
                  type:"success"
              });
          }).catch(err=>{
              this.$message({
                message:`${message}失败！`,
                type: 'warning'
            });
            this.optionDialog.dialogVisible=false;
          })
      }
  },
  computed:{

  }
}
</script>

<style scoped>

</style>
